import React, { Component } from 'react';
import { StyleSheet, View} from 'react-native'
import { Button } from 'iftide'

export default class Basic1 extends Component{
    constructor(props) {
        super(props);
    }

    onPress(value){
        console.log(value);
    }

    render() {
        return (
            <View>
                <View style={styles.container_one}>
                    <Button title={"主要按钮"} size={"normal"} isRadius={true} activeColor={'blue'} pressInColor={'pink'} borderRadius={10}/>
                </View>
                <View style={styles.container_one}>
                    <Button title={"主要按钮 - 禁用"} size={"normal"} isRadius={true} disabled={true} activeColor={'green'}/>
                </View>
                <View style={styles.container_one}>
                    <Button title={"次要按钮"} size={"normal"} type={"secondary"} isRadius={true} activeColor={'green'}/>
                </View>
                <View style={styles.container_one}>
                    <Button title={"次要按钮 - 禁用"} size={"normal"} type={"secondary"} isRadius={true} disabled={true}/>
                </View>
                <View style={styles.container_smallest}>
                    <Button title={"主要按钮"} size={"smallest"} isRadius={true}/>
                    <Button title={"次要按钮"} size={"smallest"} type={"secondary"} isRadius={true} hasMargin={true}/>
                    <Button title={"按钮"} size={"smallest"} isRadius={true} hasMargin={true} disabled={true}/>
                    <Button title={"按钮"} size={"smallest"} type={"secondary"} isRadius={true} hasMargin={true} disabled={true}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container_one:{
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: 4,
    },
    container_two: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: 4,
    },
    container_three: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: 4,
    },
    container_smallest:{
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 3,
        marginVertical: 4,
    },
});
